<script setup lang="ts">
import { RouterView, useRoute, useRouter } from 'vue-router';
// import { Tabbar, TabbarItem } from 'vant';
import {ref, watch} from 'vue';

const route = useRoute()
const router = useRouter()
//记录当前选择的tab
const active = ref(route.name as string)

watch(active, (nv) => {
  router.push(
    { name: nv,}
  )
})

// 定义允许显示 Tabbar 的路由名称
const allowedRoutes = ['home', 'order', 'me'];
// 判断当前路由是否允许显示 Tabbar
const showTabbar = ref(allowedRoutes.includes(route.name as string));

watch(() => route.name, (newName) => {
  showTabbar.value = allowedRoutes.includes(newName as string);
});
</script>

<template>
  <!-- <div class="center">{{ active }}</div> -->
    <!-- <RouterView></RouterView> -->
    <RouterView v-slot="{ Component }">
      <keep-alive include="ShopView, HomeView">
        <component :is="Component" />
      </keep-alive>
    </RouterView>
  <!-- 仅在允许的路由下显示 Tabbar -->
  <template v-if="showTabbar">
    <VanTabbar v-model="active">
      <VanTabbarItem name="home" icon="home-o">首页</VanTabbarItem>
      <VanTabbarItem name="order" icon="bars">订单</VanTabbarItem>
      <VanTabbarItem name="me" icon="contact">我的</VanTabbarItem>
    </VanTabbar>
  </template>
</template>

<style>
.center {
  text-align: center;
}
</style>
